<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <!--<link rel="stylesheet" href="assets/materialize/css/materialize.min.css">-->
    <link rel="stylesheet" href="assets/layer/skin/layer.css">
    <!-- jcrop css -->
    <link rel="stylesheet" href="assets/jcrop/css/jquery.Jcrop.min.css">

    <style>
        .example img {
            width: 600px;
            height: 500px;

        }

        fieldset {
            margin: 0 0 20px 0;
            padding: 0;
            border: 0;
        }

        fieldset legend {
            display: block;
            width: 100%;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border: 0;
            border-bottom: 1px solid #e5e5e5;
            font: bold 14px/20px '\5fae\8f6f\96c5\9ed1';
        }

        .inleft {
            float: left;
        }

        .inright {
            float: left;
            margin-left: 20px;
        }

        /* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */

        .jcrop-holder #preview-pane {
            display: block;
            position: absolute;
            z-index: 2000;
            top: 0;
            right: -280px;
            padding: 6px;
            border: 1px rgba(0, 0, 0, .4) solid;
            border-radius: 6px;
            background-color: white;
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        }

        /* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */

        #preview-pane .preview-container {
            width: 250px;
            height: 250px;
            overflow: hidden;
        }

        .button.active {
            opacity: 0.6;
        }

        .hidden {
            display: none;
        }

    </style>
</head>

<body>
<div>
    <div>
        <label for="tx">输入框</label>
        <input type="text" id="tx" name="tx">
        <button id="btn" type="button">Layer Icon</button>
    </div>

    <div class="example">
        <img src="assets/images/012133dsa4toxud8snsbo1.jpg" id="avatar" alt="[Jcrop Example]">

        <div id="preview-pane">
            <div class="preview-container">
                <img src="assets/images/xn.png" class="jcrop-preview" alt="Preview">
            </div>
        </div>
    </div>
    <form id="img_form" class="hidden" action="i.php" method="post">
        <input type="text" id="x" name="x">
        <input type="text" id="y" name="y">
        <input type="text" id="w" name="w">
        <input type="text" id="h" name="h">
    </form>
    <input id="img_form_sbmt" class="button blue" type="submit" value="裁剪图像">
</div>
<a class="bshareDiv" href="http://www.bshare.cn/share">分享按钮</a>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=&amp;style=3&amp;fs=4&amp;textcolor=#fff&amp;bgcolor=#06C&amp;text=分享到"></script>
<div class="bshare-custom">
    <a title="分享到QQ空间" class="bshare-qzone"></a>
    <a title="分享到QQ好友" class="bshare-qqim"></a>
    <a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
    <a title="分享到人人网" class="bshare-renren"></a>
    <a title="分享到腾讯微博" class="bshare-qqmb"></a>
    <a title="分享到网易微博" class="bshare-neteasemb"></a>
    <a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
    <span class="BSHARE_COUNT bshare-share-count">0</span>
</div>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=3&amp;lang=zh"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
<script src="assets/js/jq/jquery-1.11.3.js"></script>
<script src="assets/layer/layer.js"></script>
<script src="assets/jcrop/js/jquery.Jcrop.min.js"></script>
<script src="assets/js/check.kit.js"></script>
<script type="text/javascript" src="assets/js/goto.js"></script>
<script>
    $(document).ready(function () {
        console.log("document load finished");

        $("#img_form").submit(function () {
            if ($("#w").val() == '') {
                alert("please thumbnail image");
                return false;
            }
            alert('x:' + $('#x').val() + ' y:' + $('#y').val() + ' w:' + $('#w').val() + ' h:' + $('#h').val());
            return false;
        });

        $("#img_form_sbmt").on('click', function () {
            console.log('btn_click');
            $("#img_form").submit();
        });

        var jcropapi,
                bx,
                by,
                $preview = $("#preview-pane"),
                $pcnt = $("#preview-pane .preview-container"),
                $preimg = $("#preview-pane .preview-container img"),
                xs = $pcnt.width(),
                ys = $pcnt.height();

        //
        $("#avatar").Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: xs / ys
        }, function () {
            var bs = this.getBounds();
            bx = bs[0];
            by = bs[1];
            jcropapi = this;
            $preview.appendTo(jcropapi.ui.holder);
        });

        function updatePreview(c) {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);

            if (parseInt(c.w) > 0) {
                var rx = xs / c.w;
                var ry = ys / c.h;
                $preimg.css({
                    width: Math.round(rx * bx) + 'px',
                    height: Math.round(ry * by) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
        };

        var index = 0;
        $("#tx").blur(function () {
            console.log("tx blur");
            if (kit.check_blank('#tx')) {
                kit.sad('没有输入');
            } else {
                kit.smile($("#tx").val(), 4)
            }
        });
        $("#btn").on('click', function () {
            index++;
            if (index > 8) {
                index = 1;
            }
            kit.alert(index, index);
        });
    });

</script>
</body>

</html>
